<!--模板开始-->
 <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
            -webkit-box-sizing: border-box
        }

        body {
            background-color: white
        }

        #container {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 500px;
            height: 815px;
            overflow: hidden;
        }
        #container > img,#container > div {
            position: absolute;
        }

        #qunhua1 {
            position: absolute;
            top: -87px;
            left: -290px;
            opacity: 0;
            -webkit-transform: scale(.47);
        }
        #qunhua2 {
            position: absolute;
            top: 485px;
            left: -290px;
            opacity: 0;
            -webkit-transform: scale(.47);
        }

        #pagetitle_ctn {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 500px;
            height: 815px;
        }

        #hua1 {
            position:absolute;
            top: 195px;
            left: -9px;
            -webkit-transform-origin: 30% 60%;
            -webkit-transform: scale(.4) rotate(30deg);
        }
        #ye3 {
            position:absolute;
            top: 464px;
            left: 380px;
            -webkit-transform: scale(.4) rotate(-90deg);
        }
        #ye2 {
            position:absolute;
            top: 466px;
            left: 395px;
            -webkit-transform: scale(0) rotate(-90deg);
        }
        #ye1 {
            position:absolute;
            top: 483px;
            left: 403px;
            -webkit-transform: scale(0) rotate(-90deg);
        }

        #gan {
            position:absolute;
            top: 483px;
            left: 35px;
            opacity: 0;
            -webkit-transform-origin: top; 
        }
        #en {
            position:absolute;
            top: 486px;
            left: 92px;
            opacity: 0;
            -webkit-transform-origin: top;
        }
        #you {
            position:absolute;
            top: 488px;
            left: 148px;
            opacity: 0;
            -webkit-transform-origin: top;
        }
        #ni {
            position:absolute;
            top: 490px;
            left: 204px;
            opacity: 0;
            -webkit-transform-origin: top;
        }

        #pagetitle {
            position:absolute;
            width:402px;
            height:255px;
            top: 270px;
            left: 49px;
            opacity:0;
        }

        .titletable {
            position: absolute;
            width: 260px;
            height: 160px;
            top: 36px;
            left: 63px;
            display: table;
        }

        #titlecontent {
            vertical-align:middle;
            display:table-cell;
            text-align:center;
            font-size:22px;
            line-height:33px;
            color:#8EB7D9;
        }

        #yezi1 {
            position:absolute;
            top: -70px;
            left: 350px;
        }

        #yezi2 {
            position:absolute;
            top: -70px;
            right: -70px;
        }

        #yezi3 {
            position:absolute;
            top: 250px;
            right: -70px;
        }

        #hua2 {
            position:absolute;
            top: 45px;
            left: -30px;
            -webkit-transform-origin: 0% 60%; 
            -webkit-transform: translate(-150px,0) rotate(-66deg);
        }

        #hua3 {
            position:absolute;
            top: 524px;
            left: 226px;
            -webkit-transform-origin: 30% 80%; 
            -webkit-transform: translate(0px,100px) rotate(90deg);
        }

        #hua4 {
            position:absolute;
            top: 590px;
            left: 322px;
            opacity: 0;
            -webkit-transform: scale(.4);
        }
        #hua4_img {
        }

        #ye_ctn {
            position:absolute;
            top: 130px;
            left: 20px;
            opacity: 0;
        }
        #ye6{
            position:absolute;
            top: 0px;
            left: 0px;
        }
        #ye5{
            position:absolute;
            top: 12px;
            left: 16px;
        }
        #ye4{
            position:absolute;
            top: 20px;
            left: 26px;
        }

        #hua5 {
            position: absolute;
            top: 20px;
            left: 380px;
            -webkit-transform: translate(150px,-50px) rotateY(180deg);
        }

        #hua6 {
            position: absolute;
            top: 314px;
            left: -240px;
            opacity: 0;
        }

        .page_ctn {
            position: absolute;
            width: 440px;
            height:740px;
            left: 30px;
            top: 30px;
            opacity: 0;
        }
        #page1_ctn {
            background-image: url({$skinurl}skin/ganen2/page_bg1.png);
            background-size:100% 100%;
        }
        #page2_ctn {
            background-image: url({$skinurl}skin/ganen2/page_bg2.png);
            background-size:100% 100%;
        }
        #page3_ctn {
            background-image: url({$skinurl}skin/ganen2/page_bg3.png);
            background-size:100% 100%;
        }
        .page {
            position: absolute;
            /*opacity: 0;*/
        }

        .showwords {
            font-size: 20px;
            color:  #82adce;
            position: absolute;
            z-index: 1;
            /*bottom: 20px;*/
            /*left: 15%;*/
            left: 47px;
            /*width: 70%;*/
            line-height: 40px;
            text-align: center;
            /*text-shadow: 1px 1px 2px #000;*/
            letter-spacing: 2px;
            opacity: 0;

            top: 600px;
            left: 50px;
            width: 405px;
            height: 40px;
            background-size: 100% 100%;
        }
        .showwords_bg {
            position: absolute;
            width: 100%;
            height: 100%;
            background-color: #fff;
            opacity: 0.6;
        }

        #word1,#word2,#word3 {
            position: absolute;
            width: 100%;
            height: 100%;
            background-size: 100% 100%;
        }

    </style>
    <style type="text/css">
        @-webkit-keyframes page3
        {
            0%  {
                opacity: 0;
                -webkit-transform: translate(0px,0px) scale(1.2) rotate(-20deg);
            }
            17% {
                opacity: 1;
                -webkit-transform: translate(0px,0px) scale(1) rotate(4deg);
            }
            75% {
                opacity: 1;
                -webkit-transform: translate(0px,0px) rotate(0deg);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translate(-200px,0px) rotate(-2deg);
            }
        }
        @-webkit-keyframes page2
        {
            0%  {
                opacity: 0;
                -webkit-transform: translate(200px,0px) rotate(0deg);
            }
            13% {
                opacity: 1;
            }
            23% {
                opacity: 1;
                -webkit-transform: translate(0px,0px) rotate(6deg);
            }
            83% {
                opacity: 1;
                -webkit-transform: translate(0px,0px) rotate(2deg);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translate(0px,0px) rotate(2deg);
            }
        }
        @-webkit-keyframes page1
        {
            0%  {
                opacity: 0;
                -webkit-transform: translate(200px,-50px) rotate(20deg);
            }
            17% {
                opacity: 1;
                -webkit-transform: translate(0px,0px) rotate(0deg);
            }
            75% {
                opacity: 1;
                -webkit-transform: translate(0px,0px) rotate(-6deg);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translate(-100px,200px) rotate(-10deg);
            }
        }


        @-webkit-keyframes word3
        {
            0%  {
                opacity: 0;
                -webkit-transform: translate(100px,0px);
            }
            17% {
                opacity: 1;
                -webkit-transform: translate(0px,0px);
            }
            83% {
                opacity: 1;
                -webkit-transform: translate(0px,0px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translate(100px,0px);
            }
        }
        
        @-webkit-keyframes word2
        {
            0%  {
                opacity: 0;
                -webkit-transform: translate(0px,50px);
            }
            17% {
                opacity: 1;
                -webkit-transform: translate(0px,0px);
            }
            83% {
                opacity: 1;
                -webkit-transform: translate(0px,0px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translate(-200px,0px);
            }
        }
        @-webkit-keyframes word1
        {
            0%  {
                opacity: 0;
                -webkit-transform: translateX(-200px);
            }
            24% {
                opacity: 1;
                -webkit-transform: translateX(0px);
            }
            84% {
                opacity: 1;
                -webkit-transform: translateX(0px);
            }
            100%  {
                opacity: 0;
                -webkit-transform: translateX(-200px);
            }
        }

        @-webkit-keyframes hua6
        {
            0%  {
                opacity: 0;
                -webkit-transform: translate(-150px,50px) scale(1);
            }
            17% {
                opacity: 1;
                -webkit-transform: translate(0px,0) scale(.4) rotate(0deg);
            }
         
            75% {
                -webkit-transform: translate(0px,0) scale(.4) rotate(10deg);
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: translate(-150px,50px) scale(1) rotate(0deg);
            }
        }
        @-webkit-keyframes hua5
        {
            0%  {
                -webkit-transform: translate(150px,-50px) rotateY(180deg);
            }
            17% {
                -webkit-transform: translate(0px,0) rotateY(180deg) rotate(0deg) ;
            }
         
            75% {
                -webkit-transform: translate(0px,0) rotateY(180deg) rotate(10deg);
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: translate(150px,-50px) rotateY(180deg) rotate(10deg);
            }
        }
        @-webkit-keyframes ye_ctn
        {
            0%  {
                opacity: 0;
                -webkit-transform: translate(0px,0px);
            }
            13%  {
                opacity: 1;
                -webkit-transform: translate(0px,0px);
            }
            82%  {
                -webkit-transform: translate(0px,0px);
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: translate(-100px,-100px);
            }
        }
        @-webkit-keyframes hua4_img
        {
            0%  {
                -webkit-transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(720deg);
            }
        }
        @-webkit-keyframes hua4
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(.2);
            }
            7%  {
                opacity: 1;
                -webkit-transform: scale(.2);
            }
            23% {
                -webkit-transform: scale(.4);
            }
            83% {
                -webkit-transform: scale(.6);
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: scale(.3);
            }
        }
        @-webkit-keyframes hua3
        {
            0%  {
                -webkit-transform: translate(0px,100px) rotate(90deg);
            }
            17% {
                -webkit-transform: translate(0px,0) rotate(0deg);
            }
         
            75% {
                -webkit-transform: rotate(-10deg);
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: translate(-300px,300px) rotate(-60deg);
            }
        }
        @-webkit-keyframes hua2
        {
            0%  {
                -webkit-transform: translate(-150px,0) rotate(-66deg);
            }
            17% {
                -webkit-transform: translate(0px,0) rotate(0deg);
            }
         
            75% {
                -webkit-transform: rotate(10deg);
                opacity: 1;
            }
            100% {
                opacity: 0;
                -webkit-transform: translate(-300px,300px) rotate(30deg);
            }
        }

        @-webkit-keyframes yezi
        {
            0%  {
                -webkit-transform: translate(0px,0px);
            }
            100%  {
                -webkit-transform: translate(-600px,600px);
            }
        }
        @-webkit-keyframes gan
        {
            0%  {
                opacity: 0;
                -webkit-transform: translateX(80px) rotate(0deg);
            }
            31% {
                opacity: 1;
                -webkit-transform: translateX(0px) rotate(0deg);
            }
         
            72% {
                opacity: 1;
                -webkit-transform: rotate(-6deg);
            }
            100% {
                opacity: 1;
                -webkit-transform: rotate(0deg);
            }
        }
        @-webkit-keyframes en
        {
            0%  {
                opacity: 0;
                -webkit-transform: translateX(80px) rotate(0deg);
            }
            31% {
                opacity: 1;
                -webkit-transform: translateX(0px) rotate(0deg);
            }
         
            72% {
                opacity: 1;
                -webkit-transform: rotate(6deg);
            }
            100% {
                opacity: 1;
                -webkit-transform: rotate(0deg);
            }
        }
        @-webkit-keyframes fadein
        {
            0%  {opacity: 0}
            100%    {opacity: 1}
        }
        @-webkit-keyframes fadeout
        {
            0%  {opacity: 1}
            100%    {opacity: 0}
        }
        @-webkit-keyframes qunhua1
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(.55) translateY(-50px);
            }
            21% {
                opacity: 1;
                -webkit-transform: scale(.47) translateY(0px);
            }
            100% {
                opacity: 1;
                -webkit-transform: scale(.5) translateY(0px);
            }
        }
        @-webkit-keyframes qunhua2
        {
            0%  {
                opacity: 0;
                -webkit-transform: scale(.55) translateY(50px);
            }
            21% {
                opacity: 1;
                -webkit-transform: scale(.47) translateY(0px);
            }
            100% {
                opacity: 1;
                -webkit-transform: scale(.5) translateY(0px);
            }
        }
        @-webkit-keyframes hua1
        {
            0%  {
                -webkit-transform: scale(.4) rotate(30deg);
            }
            100% {
                -webkit-transform: scale(1) rotate(0deg);
            }
        }
        @-webkit-keyframes ye1
        {
            0%  {
                -webkit-transform: scale(0) rotate(-90deg);
            }
            11%  {
                -webkit-transform: scale(0) rotate(-90deg);
            }
            36% {
                -webkit-transform: scale(1) rotate(0deg);
            }
            60% {
                -webkit-transform: scale(1) rotate(-6deg);
            }
            100% {
                -webkit-transform: scale(1) rotate(0deg);
            }
        }
        @-webkit-keyframes ye2
        {
            0%  {
                -webkit-transform: scale(0) rotate(-90deg);
            }
            7%  {
                -webkit-transform: scale(0) rotate(-90deg);
            }
            29% {
                -webkit-transform: scale(1) rotate(0deg);
            }
            64% {
                -webkit-transform: scale(1) rotate(-6deg);
            }
            100% {
                -webkit-transform: scale(1) rotate(0deg);
            }
        }
        @-webkit-keyframes ye3
        {
            0%  {
                -webkit-transform: scale(.4) rotate(-90deg);
            }
            22% {
                -webkit-transform: scale(1) rotate(0deg);
            }
            66% {
                -webkit-transform: scale(1) rotate(6deg);
            }
            100% {
                -webkit-transform: scale(1) rotate(0deg);
            }
        }

        @-webkit-keyframes pagetitle_ctn
        {
            0%  {
                -webkit-transform: translate(0px,0px);
                opacity: 1;
            }
            100% {
                -webkit-transform: translate(100px,300px);
                opacity: 0;
            }
        }
    </style>
    <body>
        <div id='container'>
            <img src="{$skinurl}skin/ganen2/bg.jpg"/>
            
            <div id='pagetitle_ctn'>
                <div id='pagetitle'>
                    <img src='{$skinurl}skin/ganen2/title_bg.png'/>
                    <div class='titletable'>
                        <div id='titlecontent'>
                            音乐相册，打开看看
                        </div>
                    </div>
                </div>
                <img id='hua1' src="{$skinurl}skin/ganen2/hua1.png"/>
                <img id='gan' src="{$skinurl}skin/ganen2/gan.png"/>
                <img id='en' src="{$skinurl}skin/ganen2/en.png"/>
                <img id='you' src="{$skinurl}skin/ganen2/you.png"/>
                <img id='ni' src="{$skinurl}skin/ganen2/ni.png"/>


                <img id='ye3' src="{$skinurl}skin/ganen2/ye3.png"/>
                <img id='ye2' src="{$skinurl}skin/ganen2/ye2.png"/>
                <img id='ye1' src="{$skinurl}skin/ganen2/ye1.png"/>
            </div>

            
            <div id='page1_ctn' class='page_ctn'>
                <div id='page1' class='page'>
                </div>
            </div>

            <img id='hua2' src="{$skinurl}skin/ganen2/hua2.png"/>
            <img id='hua3' src="{$skinurl}skin/ganen2/hua3.png"/>

            <div id='page2_ctn' class='page_ctn'>
                <div id='page2' class='page'>
                </div>
            </div>

            <div id='ye_ctn'>
                <img id='ye6' src="{$skinurl}skin/ganen2/ye3.png"/>
                <img id='ye5' src="{$skinurl}skin/ganen2/ye2.png"/>
                <img id='ye4' src="{$skinurl}skin/ganen2/ye1.png"/>
            </div>
            <div id='hua4'>
                <img id='hua4_img' src="{$skinurl}skin/ganen2/hua4.png"/>
            </div>

            <div id='page3_ctn' class='page_ctn'>
                <div id='page3' class='page'>
                </div>
            </div>
            <img id='hua5' src="{$skinurl}skin/ganen2/hua1.png"/>
            <img id='hua6' src="{$skinurl}skin/ganen2/hua6.png"/>


            <img id='qunhua1' src="{$skinurl}skin/ganen2/qunhua1.png"/>
            <img id='qunhua2' src="{$skinurl}skin/ganen2/qunhua2.png"/>

            <img id='yezi1'  src="{$skinurl}skin/ganen2/ye2.png"/>
            <img id='yezi2'  src="{$skinurl}skin/ganen2/ye2.png"/>
            <img id='yezi3'  src="{$skinurl}skin/ganen2/ye2.png"/>
            
            <div  id='word1_ctn' class='showwords' >
                <div class='showwords_bg'></div>
                <div id='word1'></div>
            </div>
            <div id='word2_ctn' class='showwords'>
                <div class='showwords_bg'></div>
                <div id='word2'></div>
            </div>
            <div id='word3_ctn' class='showwords'>
                <div  class='showwords_bg'></div>
                <div id='word3'></div>
            </div>
        </div>
    </body>
        </html>
<script>
var image_size_width=[];
var image_size_height=[];
var image_url_index=0;
var have_num = 0;
var error_num = 0;
var canshow = true;
var reshow = false;
var timeout = [];
var delaytime=4500;

var get_pid = function(url){
    var index1 = url.indexOf("?");
    if(index1 != -1)
    {
        url = url.substr(0, index1);
    }
    return url.toString().substr(url.lastIndexOf("/") + 1);
}

function id(name)
{
    return document.getElementById(name);
}
function load_images()
{
    reshow = false;
    image_size_width=[];
    image_size_height=[];
    Onload_imgs_url=[];
    image_url_index=0;
    have_num = 0;
    error_num = 0;
    begin_titletime = new Date();
    begin_titletime = begin_titletime.getTime();
    showtitle();
    canshow = true;
    for(var i=0;i<slider_images_url.length;i++)
    {
        var img=new Image();
        img.index=i;
        img.src=slider_images_url[i];
        img.onload=image_onload;
        img.onerror= image_onerror;
        Onload_imgs_url[i] = 'loading';
    }       
}

function image_onerror(event)
{
    var img = event.target;
    var index = img.index;
    if(index<10)
        error_num ++;
    Onload_imgs_url[index] = 'not find';
    console.log(Onload_imgs_url[index]);
    console.log(have_num + '-' + error_num);
    if((have_num+error_num >= 10 || slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            kuxuan();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
        }
    }
}

function image_onload(event)
{
    if(reshow == true)
        return;

    var img = event.target;
    var index = img.index;

    if(index<10)
    {
        have_num++;
    }
    Onload_imgs_url[index] = img.src;
    image_size_height[index] = img.height;
    image_size_width[index] = img.width;

    // console.log(Onload_imgs_url[index]);
    // console.log(have_num + '-' + error_num);

    if((have_num + error_num >= 10 ||slider_images_url.length == (have_num+error_num)) && canshow == true)
    {   
        reshow = false;
        canshow =false;
        if(have_num == 0)
            return;
        var end_titletime = new Date();
        end_titletime = end_titletime.getTime();
        var dis_titletime = Math.abs(end_titletime-begin_titletime);
        if(dis_titletime>delaytime)
        {
            kuxuan();
        }
        else
        {
            dis_titletime = delaytime- dis_titletime;
            timeout[0] = setTimeout(function()
                {
                    kuxuan();
                },dis_titletime);
        }

    }
}
function showtitle()
{

    id('hua1').style.webkitAnimation = 'hua1 1.3s ease-out both';
    id('gan').style.webkitAnimation = 'gan 3.6s 0.6s ease-out both';
    id('en').style.webkitAnimation = 'en 3.6s 0.7s ease-out both';
    id('you').style.webkitAnimation = 'gan 3.6s 0.8s ease-out both';
    id('ni').style.webkitAnimation = 'gan 3.6s 0.9s ease-out both';
    id('ye3').style.webkitAnimation = 'ye3 4.5s ease-out both';
    id('ye2').style.webkitAnimation = 'ye2 4.5s ease-out both';
    id('ye1').style.webkitAnimation = 'ye1 4.5s ease-out both';

    id('qunhua1').style.webkitAnimation = 'qunhua1 6.6s ease-out both';
    id('qunhua2').style.webkitAnimation = 'qunhua2 6.6s ease-out both';
    
    id('pagetitle').style.webkitAnimation = 'fadein 0.8s ease-out both';

    id('titlecontent').innerHTML = e_title

}

function kuxuan()
{
    id('pagetitle_ctn').style.webkitAnimation = 'pagetitle_ctn 1.1s ease-out both';
    id('yezi1').style.webkitAnimation = 'yezi 12s 4s linear infinite both';
    id('yezi2').style.webkitAnimation = 'yezi 10s linear infinite both';
    id('yezi3').style.webkitAnimation = 'yezi 13s 2s linear infinite both';
    show1();
}

function show1()
{
    setImage('1');
   
    id('ye_ctn').style.webkitAnimation = '';
    id('ye6').style.webkitAnimation = '';
    id('ye5').style.webkitAnimation = '';
    id('ye4').style.webkitAnimation = '';

    id('hua4').style.webkitAnimation = '';
    id('hua4_img').style.webkitAnimation = '';

    id('page2_ctn').style.webkitAnimation = '';
    id('word2_ctn').style.webkitAnimation = '';

    id('hua2').style.webkitAnimation = 'hua2  6.5s ease-out both';
    id('hua3').style.webkitAnimation = 'hua3  6.5s ease-out both';
  
    id('page1_ctn').style.webkitAnimation = 'page1 6.5s cubic-bezier(.41,.6,.63,.99) both';

    var word =  id('word1').innerText;
    if (word !== '') {
        id('word1_ctn').style.webkitAnimation = 'word1 6.5s cubic-bezier(.41,.6,.63,.99) both';
    };
    timeout[1] = setTimeout(show2,6000);
}


function show2()
{
    setImage('2');
    id('hua5').style.webkitAnimation = '';
    id('hua6').style.webkitAnimation = '';
    id('page3_ctn').style.webkitAnimation = '';
    id('word3_ctn').style.webkitAnimation = '';

    id('ye_ctn').style.webkitAnimation = 'ye_ctn 6s ease-out both';
    id('ye6').style.webkitAnimation = 'ye3 4.5s ease-out both';
    id('ye5').style.webkitAnimation = 'ye2 4.5s ease-out both';
    id('ye4').style.webkitAnimation = 'ye1 4.5s ease-out both';

    id('hua4').style.webkitAnimation = 'hua4  6.5s ease-out both';
    id('hua4_img').style.webkitAnimation = 'hua4_img  6.5s ease-out both';

    id('page2_ctn').style.webkitAnimation = 'page2 6.5s cubic-bezier(.41,.6,.63,.99) both';
    var word =  id('word2').innerText;
    if (word !== '') {
        id('word2_ctn').style.webkitAnimation = 'word2 6s 0.3s cubic-bezier(.41,.6,.63,.99) both';
    };

    timeout[2] = setTimeout(show3,6000);
}
function show3()
{
    setImage('3');
    id('hua2').style.webkitAnimation = '';
    id('hua3').style.webkitAnimation = '';
    id('page1_ctn').style.webkitAnimation = '';
    id('word1_ctn').style.webkitAnimation = '';
  
    id('hua5').style.webkitAnimation = 'hua5 6.5s ease-out both';
    id('hua6').style.webkitAnimation = 'hua6 6.5s ease-out both';

    id('page3_ctn').style.webkitAnimation = 'page3 6.5s cubic-bezier(.41,.6,.63,.99) both';
    var word =  id('word3').innerText;
    if (word !== '') {
        id('word3_ctn').style.webkitAnimation = 'word3 6.5s 0.3s cubic-bezier(.41,.6,.63,.99) both';
    };
    
    timeout[3] = setTimeout(show1,6500);
}


function setImage(idname)
{
    if(reshow == true)
        return;

    while(Onload_imgs_url[image_url_index] == 'not find' || Onload_imgs_url[image_url_index] == 'loading')
    {
        // console.log(Onload_imgs_url[image_url_index]);
        image_url_index++;
        if(image_url_index == Onload_imgs_url.length)
            image_url_index = 0;
    }

    var img_bili = image_size_width[image_url_index]/image_size_height[image_url_index];
    var div;
    var div_ctn;
   


    div = id('page'+idname);
    div_ctn = id('page'+idname + '_ctn');

   
    if(img_bili < (380/600))
    {
        var height = 600;
        var width = 600 * img_bili;
        // var top = 90;
        var top = (740-height)/2;
        var left = (440-width)/2 - 6;
    }
    else if(img_bili <= 1)
    {
        var width = 400;
        var height = 400 / img_bili;
        var left = 14;
        // var top = (740-height)/2;
        var top = 115;
    }
    else if(img_bili > 1)
    {
        var width = 400;
        var height = 400/img_bili;
        var left = 14;
        var top = (740-height)/2;
    } 
    div.style.width = width + 'px';
    div.style.height = height + 'px';
    div.style.backgroundSize = (width) + 'px ' + (height) + 'px';
    div.style.backgroundImage = 'url('+Onload_imgs_url[image_url_index]+')';
    div.style.backgroundRepeat = 'no-repeat';
    div.style.top = (top) + 'px';
    div.style.left = (left) + 'px';


    var word = id('word'+idname);

    var word_string = words[get_pid(Onload_imgs_url[image_url_index])];
    if(word_string != undefined)
    {
        word_string = word_string.replace(/[\n]/ig,'');
     
        word.innerText = word_string;
    }
    else
    {
        word.innerText = "";
    }
    
    image_url_index++;
    if(image_url_index==Onload_imgs_url.length)
        image_url_index = 0;
}

call_me(load_images);

function reload_scene()
{
    clearnode();
    reshow = true;
    setTimeout(load_images,100);
}

function clearnode()
{
    for(var i = 0; i<timeout.length; i++)
    {
        clearTimeout(timeout[i]);
    }
 
 
    var xinArr = ['pagetitle','hua1','gan','en','you','ni','ye3','ye2','ye1','qunhua1','qunhua2','pagetitle_ctn','yezi1','yezi2','yezi3','hua2','hua3','hua4','hua4_img','hua5','hua6','ye_ctn','ye6','ye5','ye4','page1_ctn','page2_ctn','page3_ctn','word1_ctn','word2_ctn','word3_ctn'];

    for(var i = 0 ;i < xinArr.length ;i++)
    {
        id(xinArr[i]).style.webkitAnimation = '';
    }
}

</script>
<!-- 模板结束 -->